<!doctype html>
<html>
<head>
	<meta charset=utf-8>
	<title>Simple Templating</title>
</head>
<body>

<div class="result"></div>

<script type="text/template-foreach:.result" id="template">
	<li sort:id="<%= id%>">
		<div><a href="<%= href%>"><%= title%></a></div>
		<img src="<%= imgSrc%>" alt="<%= title%>">
	</li>

</script>


<script type="text/javascript">
	LAMJS.run(function() {
		'use strict';
		var System = this;
		var data = [
			{
				id : '1',
				title : 'php web appliaction',
				href : 'http://www.baidu.com',
				imgSrc : 'http://www.baidu.com'
			},
			{
				id : '2',
				title : 'java web appliaction',
				href : 'http://www.baidu.com',
				imgSrc : 'http://www.baidu.com'
			},
			{
				id : '3',
				title : 'python web appliaction',
				href : 'http://www.baidu.com',
				imgSrc : 'http://www.baidu.com'
			},
			{
				id : '4',
				title : 'js 权威指南',
				href : 'http://www.qq.com',
				imgSrc : 'http://www.qq.com'
			}];

		$(function(){
			var template = document.querySelector('#template').innerHTML;
			document.querySelector('.result').innerHTML=(System.Template.foreach($('[type="text/template-foreach:.result"]').html(), data,['<%= ','%>']));

		});
	});


</script>
</body>
</html>